<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="author" content="kfzjw008">
    
    <meta name="description" content="IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备">
    
    
    
    
    
    
    <title>【WEB】web开发基础知识整理（2） | 几何军工作室</title>
    <!-- inject:style -->
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <!-- endinject -->
    <style>
        .cube-loading {
            top: 0;
            position: fixed;
            width: 100%;
            height: 100%;
            background: url('/images/lg/loading.gif') no-repeat center center;
            background-color: rgba(0,0,0,.7);
        }

        .cube-loading.out {
            display: none;
        }

        .cube-loading:before {
            display: block;
            content: '加载中';
            position: relative;
            width: 100%;
            top: 50%;
            right: -50%;
            color: #fff;
        }

        @media(max-width: 768px) {
            .cube-loading:before {
                font-size: 1.2em;
                transform: translate(-24px,20px);
                -webkit-transform: translate(-24px,20px);
                -o-transform: translate(-24px,20px);
                -ms-transform: translate(-24px,20px);
            }
        }

        @media(min-width: 768px) {
            .cube-loading:before {

            }
        }
    </style>
    
</head>
<body>
<div class="cube-body">
    <nav id="cube-top-memu" class="cube-menu">
    <ul class="cube-menu-collapse">
        
        <li>
            <i class="cube-icon cube-icon-home" aria-hidden="true"></i>
            <a href="/">首页</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-categories" aria-hidden="true"></i>
            <a href="/categories">分类</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-tags" aria-hidden="true"></i>
            <a href="/project">工程项目</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-archive" aria-hidden="true"></i>
            <a href="/competition">学科竞赛</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-archive" aria-hidden="true"></i>
            <a href="/zone">原创空间</a>
        </li>
        
        <li>
            <i class="cube-icon cube-icon-about" aria-hidden="true"></i>
            <a href="/about-me">关于我</a>
        </li>
        
    </ul>
</nav>
<nav class="cube-side-menu" id="cube-side-menu">
    <ul class="cube-menu-list">
        
        <li>
            <a class="lrc-control">开启歌词</a>
        </li>
        
        <li>
            <a class="scroll-to-top">回到顶部</a>
        </li>
    </ul>
</nav>
    <header class="cube-header" id="cube-header">
    <img src=" http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg " alt="头部背景图片">
    
    <div class="cube-type">
        <span class="cube-typed-title">几何军工作室</span>
        <span class="cube-typed-cursor">|</span>
    </div>
    
</header>

    <style>
        nav.cube-menu:before {
            content: '';
            visibility: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 44px;
        
            filter: blur(5px);
            -webkit-filter: blur(5px);
        
            z-index: -1;
            background-image: url('http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg');
            background-repeat: no-repeat;
            background-position: center -356px;
            background-size: cover;
            background-color: transparent;
        }

        header.cube-background.cube-header-background {
            visibility: hidden;
            background-image: url('http://benyouhuifile.it168.com/forum/201204/20/154242hp8pmqm6t3izc8it.jpg');
            background-position: center -400px;
        }
    </style>
    <header class="cube-background cube-header-background">
        
        <div class="cube-type">
            <span class="cube-typed-title">几何军工作室</span>
            <span class="cube-typed-cursor">|</span>
        </div>
        
    </header>
    <div class="load-header-background"></div>
    <script>
        (function (window) {

            window.headerModule = {}
            window.headerModule.image = {
                width: '2000',
                height: '850'
            }

        })(window)
    </script>
    
    <div class="cube-content">
        <div class="cube-left">
            <div class="cube-article">
    <h1 class="title">【WEB】web开发基础知识整理（2）</h1>
    
    <div class="cube-article-header">
        <div class="cube-article-date">
            <i class="cube-icon cube-icon-date" aria-hidden="true"></i>
            <!-- moment.js对象 -->
            2018-11-05
            <span id="busuanzi_container_page_pv">
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
                   
</span>
        </div>
        <div class="cube-article-tags">
    <i class="cube-icon cube-icon-tag" aria-hidden="true"></i>
    
    <a href="/tags/期末复习/">#期末复习</a>
    
    <a href="/tags/HTML/">#HTML</a>
    
    <a href="/tags/CSS/">#CSS</a>
    
    <a href="/tags/前端/">#前端</a>
    
</div>
    </div>
    
    
    <div class="cube-article-content cube-markdown">
        
        <h1 id="WEB开发技术基础知识整理（2）"><a href="#WEB开发技术基础知识整理（2）" class="headerlink" title="WEB开发技术基础知识整理（2）"></a>WEB开发技术基础知识整理（2）</h1><h2 id="第二部分——CSS"><a href="#第二部分——CSS" class="headerlink" title="第二部分——CSS"></a>第二部分——CSS</h2><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><ul>
<li>css被称作层叠样式表。</li>
<li>让网页结构和样式分离</li>
<li>将HTML文档的表现与内容分离</li>
<li>使HTML文档结构简化、清晰、灵活</li>
<li>极大的提高了HTML文档的可读性</li>
<li>Cascading使样式结构简化、清晰、灵活<a id="more"></a></li>
<li>增强了网站全局的一致性</li>
<li>CSS文件存储在浏览器的高速缓存中，多个页面</li>
<li>必重新装载分析样式，降低网络数据传输</li>
<li>便于针对不同设备目标定制不同的样式</li>
<li>为视觉障碍者提供帮助</li>
</ul>
<h3 id="重点"><a href="#重点" class="headerlink" title="重点"></a>重点</h3><ul>
<li>CSS的作用</li>
<li>CSS的基本编写规范</li>
<li>CSS代码的声明定义使用方法</li>
<li>CSS层叠的表现形式及显示效果</li>
<li>Boxing model，表现形式、显示效果、声明定义方法</li>
<li>浮动属性的特点</li>
<li>各应用场景下的尺寸单位</li>
<li>Inline、block、Inline-block属性的特点</li>
<li>CSS的ID、类、元素、子、后代、属性等选择器的声明定义方法</li>
</ul>
<h3 id="使用方式"><a href="#使用方式" class="headerlink" title="使用方式"></a>使用方式</h3><ul>
<li>CSS 规则由两部分构成：选择器，以及一条或多条声明。<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">h1&#123;color：blue;</span><br><span class="line"><span class="comment">/*这是一条注释*/</span></span><br><span class="line"><span class="selector-tag">font-size</span><span class="selector-pseudo">:12px</span>&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><h4 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h4><p>根据元素里面的id属性值进行选择<br>类似于#id1</p>
<p>####类选择器<br>.class 根据属性class进行选择，可以是一个组<br>例如h3.green</p>
<h4 id="组合选择器"><a href="#组合选择器" class="headerlink" title="组合选择器"></a>组合选择器</h4><ul>
<li>后代选择器：元素内所有符合第二级选择的元素</li>
<li>子选择器：元素内所有符合第二级选择器的，直接子元素<h4 id="伪类"><a href="#伪类" class="headerlink" title="伪类"></a>伪类</h4></li>
<li>：hover 悬浮</li>
<li>：nth-child（odd/even）奇数偶数元素</li>
<li>：invalid 未通过验证</li>
<li>一个元素可以层叠样式</li>
</ul>
<p>实例：links</p>
<ul>
<li>：hover （放到link和visited之后有效）</li>
<li>：visited</li>
<li>：link</li>
<li>：active（hover之后有效）</li>
<li>padding（框长宽）<br>####允许多个元素同时选择<br>a,p,h1{}<br>####属性选择器<br>a[target]选择a中的target元素</li>
</ul>
<p>###如何使用</p>
<ul>
<li>外部样式表，外部css文件</li>
<li>内部样式表，内部单独开辟style标签</li>
<li>内联样式表，在元素标签内部添加style属性</li>
<li>优先级，内联样式 &gt;  内部样式表 &gt; 外部样式表</li>
<li>层叠顺序（低–高）：缺省设置，外部，内部，内联</li>
<li>必须按照正确顺序加载css（例如先bootstarp，后基于bs的ui，最后自定义样式）</li>
</ul>
<h3 id="颜色"><a href="#颜色" class="headerlink" title="颜色"></a>颜色</h3><p>rgb（255，55，0）<br>或者#ff0000</p>
<h3 id="元素"><a href="#元素" class="headerlink" title="元素"></a>元素</h3><ul>
<li>尺寸表示：em，相对于当前元素应有尺寸，用于 缩进</li>
<li>rem相对于html字体尺寸</li>
<li>%相对于父容器百分比</li>
<li>px相对于逻辑像素，相对的绝对单位</li>
<li>字体属性建议使用em，rem</li>
<li>元素布局建议使用px%<h3 id="容器"><a href="#容器" class="headerlink" title="容器"></a>容器</h3></li>
<li>外到内：margin，border，padding，content<h4 id="border"><a href="#border" class="headerlink" title="border"></a>border</h4></li>
<li>border-style 线条样式 必须</li>
<li>border-width 宽度（5px，medium，thick（顺序上右下左）</li>
<li>border-radius 弧度</li>
<li>border-（top，right，bottom，left）-style 边样式</li>
<li>border-color 颜色<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>:blue;</span><br><span class="line"><span class="attribute">font-size</span>:<span class="number">12px</span>;</span><br><span class="line"><span class="attribute">background-color</span>:<span class="number">#000000</span>;</span><br><span class="line"><span class="attribute">border-bottom</span>:<span class="number">6px</span> solid red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="padding"><a href="#padding" class="headerlink" title="padding"></a>padding</h4><ul>
<li>Padding，内边距，决定了内容至边线的距离；</li>
<li>元素背景颜色决定开空间颜色<h4 id="margin"><a href="#margin" class="headerlink" title="margin"></a>margin</h4></li>
<li>外边距，元素边线到其他元素的距离</li>
<li>颜色由父亲容器决定</li>
<li>无法定义颜色</li>
<li>若margin:auto时，可实现动态变化</li>
<li>两边的margin会取最大值<h3 id="background"><a href="#background" class="headerlink" title="background"></a>background</h3></li>
<li>background-color</li>
<li>background-image</li>
<li>background-repeat 重复定义</li>
<li>background-position 图片位置</li>
<li>background-attachment 背景不动<h3 id="text"><a href="#text" class="headerlink" title="text"></a>text</h3></li>
<li>color</li>
<li>opacity透明度</li>
<li>text-align 对齐方式</li>
<li>text-indent  缩进？</li>
<li>text-decoration （overline,line-through,underline,none）</li>
<li>text-transform uppercase，lowercase，capitalize</li>
<li>letter-spacing 字母间距</li>
<li>line-height 行间距<h3 id="font"><a href="#font" class="headerlink" title="font"></a>font</h3></li>
<li>font-family：字体</li>
<li>font-style：字体样式，倾斜，正常</li>
<li>font-size：大小</li>
<li>font-weight：normal，lighter，bold，900 字体粗细</li>
</ul>
<h3 id="list"><a href="#list" class="headerlink" title="list"></a>list</h3><ul>
<li>list-style-type 样式</li>
<li>list-style-image 图片</li>
<li>list-style-position 外部还是内部，默认外</li>
<li>ul内边距与li外边距<h3 id="table"><a href="#table" class="headerlink" title="table"></a>table</h3></li>
<li>border</li>
<li>border-collapse 内部线是否存在</li>
<li>Th，默认字体加粗居中对齐，Td，默认字体左对齐</li>
<li>在tr中声明内/外边距，字体等无效；必须声明在td中</li>
</ul>
<h3 id="一些转换"><a href="#一些转换" class="headerlink" title="一些转换"></a>一些转换</h3><ul>
<li>li转换成inline级可以横向排列</li>
<li>span转成block级别可以占用一整行</li>
<li>display: none; 元素不存在，不占用布局空间</li>
<li>visibility: hidden;元素存在不可见，仍占用布局空间</li>
<li>Inline元素，纵向内/外边距无效，横向有效；高宽无效；但可与其他元素同行显示</li>
<li>Block元素，内外边距，高宽均有效；但无法与其他元素同行显示</li>
<li>display=inline-block；对外inline，对内block，同行显示并设置高度</li>
<li>overflow 显示   visible溢出部分不截断，留在外边   hidden溢出截断   scroll 溢出部分截断其他为滚动条 auto基于内容长度绝对显示滚动条</li>
<li>float 只能左右不能上下，当浮动元素高度超过父容器时，可设置属性使父容器计算浮动元素尺寸，父容器将在浮动元素定位布局后绘制。</li>
</ul>
<h3 id="页面定位"><a href="#页面定位" class="headerlink" title="页面定位"></a>页面定位</h3><ul>
<li>默认按照页面流程定位，top等无效</li>
<li>relative 可以使用</li>
<li>absolute 相对的绝对定位</li>
<li>fixed相对浏览器位置固定</li>
</ul>
<h3 id="flex容器弹性布局"><a href="#flex容器弹性布局" class="headerlink" title="flex容器弹性布局"></a>flex容器弹性布局</h3><ul>
<li>必须声明弹性容器(flex container)，display属性设置为flex</li>
<li>弹性项，具有弹性的，类似inline-block的特性</li>
<li>flex-direction j决定主轴方向 row默认横向，，column纵向</li>
<li>flex-wrap 决定是否换行</li>
<li>flex-flow(组合) </li>
<li>justify-content 主轴对齐方法</li>
<li>align-items 纵轴对齐方式</li>
<li>align-content<h3 id="子元素"><a href="#子元素" class="headerlink" title="子元素"></a>子元素</h3></li>
<li>order </li>
<li>flex-grow 确定宽度后占用剩余宽度比重</li>
<li>flex-shrink 缩小比重，用于固定尺寸</li>
<li>flex-basis 确定宽度前的初始长度</li>
<li>flex </li>
<li>align-self 纵轴对齐方式</li>
</ul>
<h3 id="nav列表元素"><a href="#nav列表元素" class="headerlink" title="nav列表元素"></a>nav列表元素</h3><ul>
<li>list-style-type：none 取消列表样式</li>
<li>width：确定最佳宽度</li>
<li>display：block</li>
<li>text-decoration：none取消下划线</li>
</ul>
<h3 id="附加：html5布局"><a href="#附加：html5布局" class="headerlink" title="附加：html5布局"></a>附加：html5布局</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">aside</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>

    </div>
</div>

<div class="cube-article-nav">
    <ul>
        
        <li class="prev">
            <a href="/2018/11/06/web3/">
                <i class="cube-icon cube-prev" aria-hidden="true"></i>
                【WEB】web开发基础知识整理（3）
            </a>
        </li>
        
        
        <li class="next">
            <a href="/2018/11/05/web1/">
                【WEB】web开发基础知识整理（1）
                <i class="cube-icon cube-next" aria-hidden="true"></i>
            </a>
        </li>
        
    </ul>
</div>


<!-- TODO 根据theme.comment的内容进行入口选择 -->


<!-- Table of Contents -->

        </div>
        <div class="cube-right">
            

<div class="cube-search cube-sidebar" id="cube-search">
    <div class="search-container">
        <input type="text" placeholder="搜索" class="cube-search-input" id="cube-search-input">
        <i class="cube-icon cube-icon-search cube-search-submit" aria-hidden="true"></i>
    </div>
    <!-- TODO 通过给window赋一个全局变量，通过脚本赋值 -->
</div>
<script>
    (function (window) {
        'use strict';
        window.searchModule = {}
        window.searchModule.JSONUrl = '/content.json'
        window.searchModule.rootUrl = '/'
    })(window)
</script>
<div class="cube-search-form">
    <div class="cube-search-control">
        <input type="text" placeholder="搜索" class="search-input">
        <a class="close-button">
            <i class="cube-icon cube-close" aria-hidden="true"></i>
        </a>
    </div>
    <div class="cube-search-result"></div>
</div>


<div class="cube-author cube-sidebar" id="cube-author">
    
    
    <span>kfzjw008</span>
    
    
    <a title="IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备">IT开发交流社区，新媒体制作交流平台，大学生竞赛相关信息，计算机相关学科必备</a>
    
    <div class="count">
        <a class="count articles"><span>25</span>文章</a>
        <a class="count tags"><span>22</span>标签</a>
        <a class="count categories"><span>7</span>分类</a>
    </div>
</div>



<div class="cube-music cube-sidebar" id="cube-music">
    <div class="cube-player aplayer" id="cube-player"></div>
</div>
<script>
    (function (window) {
        window.musicModule = {}
        window.musicModule.musicConfig = '{"narrow":false,"autoplay":true,"showlrc":3,"theme":"#b7daff","mutex":true,"mode":"circulation","preload":"auto","listmaxheight":"513px","music":[{"title":"光明","author":"汪峰","url":"http://47.95.213.193/mp3data/%e5%85%89%e6%98%8e-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"不羁的生命","author":"汪峰","url":"http://47.95.213.193/mp3data/%e4%b8%8d%e7%be%81%e7%9a%84%e7%94%9f%e5%91%bd-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"上千个黎明","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b0-%e4%b8%8a%e5%8d%83%e4%b8%aa%e9%bb%8e%e6%98%8e.mp3","pic":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b02017%e7%bb%8f%e5%85%b8%e6%ad%8c%e6%9b%b2%e6%96%b0%e7%bc%96%e7%b2%be%e9%80%89%e9%9b%86I.jpg"},{"title":"信仰在空中飘扬","author":"汪峰","url":"http://47.95.213.193/mp3data/%e4%bf%a1%e4%bb%b0%e5%9c%a8%e7%a9%ba%e4%b8%ad%e9%a3%98%e6%89%ac-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"像梦一样自由","author":"汪峰","url":"http://47.95.213.193/mp3data/%e5%83%8f%e6%a2%a6%e4%b8%80%e6%a0%b7%e8%87%aa%e7%94%b1-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"怒放的生命","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%80%92%e6%94%be%e7%9a%84%e7%94%9f%e5%91%bd-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"大桥上","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b1%aa%e5%b3%b0%20-%20%e5%a4%a7%e6%a1%a5%e4%b8%8a.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"流年啊，你奈我何","author":"汪峰","url":"http://47.95.213.193/mp3data/%e6%b5%81%e5%b9%b4%e5%95%8a%20%e4%bd%a0%e5%a5%88%e6%88%91%e4%bd%95-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"},{"title":"生来彷徨","author":"汪峰","url":"http://47.95.213.193/mp3data/%e7%94%9f%e6%9d%a5%e5%bd%b7%e5%be%a8-%e6%b1%aa%e5%b3%b0.mp3","pic":"http://yoursite.com/images/music/null"}]}'
        window.musicModule.lrcConfig = {
            open: '开启歌词',
            close: '关闭歌词'
        }
    })(window)
</script>



<div class="cube-recent-posts cube-sidebar" id="cube-recent-posts">
    <div class="title">
        <a>近期文章</a>
    </div>
    <ul class="list">
        
        
        <li>
            <!-- TODO 如果文章要显示图片，那么在front-matter上添加preview属性(url or path) -->
            
            <div class="normal">
                <p class="index first">
                    <span>1</span>
                </p>
                <p class="title">
                    <a href="/2019/03/27/2038/" title="JAVA学习笔记(2)-spring MVC">JAVA学习笔记(2)-spring MVC</a>
                </p>
            </div>
            
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>2</span>
                </p>
                <p class="title">
                    <a href="/2019/03/25/2036/" title="JAVA学习笔记">JAVA学习笔记</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>3</span>
                </p>
                <p class="title">
                    <a href="/2019/03/25/2037/" title="设计模式学习笔记-01">设计模式学习笔记-01</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>4</span>
                </p>
                <p class="title">
                    <a href="/2019/03/23/2035/" title="蓝桥杯比赛前夜-知识总结">蓝桥杯比赛前夜-知识总结</a>
                </p>
            </div>
        </li>
        
        
        
        <li>
            <div class="normal">
                <p class="index">
                    <span>5</span>
                </p>
                <p class="title">
                    <a href="/2019/03/21/2034/" title="建立友好合作博客的方式">建立友好合作博客的方式</a>
                </p>
            </div>
        </li>
        
        
    </ul>
</div>



<div class="cube-categories cube-sidebar" id="cube-categories">
    <div class="title">
        <a href="/categories">分类</a>
    </div>
    <div class="cube-boxs">
        
        
        <div class="cube-box ">
            <a href="/categories/WEB开发/">#WEB开发</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/蓝桥杯/">#蓝桥杯</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/XML/">#XML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/数据库/">#数据库</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/博客公告/">#博客公告</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/设计模式/">#设计模式</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/categories/JAVA/">#JAVA</a>
        </div>
        
    </div>
</div>



<div class="cube-tagcloud cube-sidebar" id="cube-tagcloud">
    <div class="title">
        <a href="/tags">标签云</a>
    </div>
    <div class="cube-boxs">
        
        
        <div class="cube-box ">
            <a href="/tags/servlet/">#servlet</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/期末复习/">#期末复习</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/HTML/">#HTML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/CSS/">#CSS</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/前端/">#前端</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/算法/">#算法</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/蓝桥杯/">#蓝桥杯</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/随笔/">#随笔</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/jQuery/">#jQuery</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/JavaScript/">#JavaScript</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/WEB-Service/">#WEB Service</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/XML/">#XML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/题解/">#题解</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/数据库/">#数据库</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/MYSQL/">#MYSQL</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/BLOG/">#BLOG</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/HEXO/">#HEXO</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/设计模式/">#设计模式</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/JAVA/">#JAVA</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/UML/">#UML</a>
        </div>
        
        
        <div class="cube-box ">
            <a href="/tags/软件体系结构/">#软件体系结构</a>
        </div>
        
        
        <div class="cube-box-bg ">
            <a href="/tags/Spring-MVC/">#Spring MVC</a>
        </div>
        
    </div>
</div>



<div class="cube-links cube-sidebar" id="cube-links">
    <div class="title">
        <a>个人链接</a>
    </div>
    <ul class="list">
        
        <li>
            
            
            <img src="http://cube-1252774894.cosgz.myqcloud.com/links/GitHub.png">
            
            <a href="https://github.com/kfzjw008" target="_blank">我的GitHub</a>
        </li>
        
        <li>
            
            
            <img src="https://www.csdn.net/company/img/csdn-logo.svg">
            
            <a href="https://blog.csdn.net/kfzjw008" target="_blank">我的CSDN</a>
        </li>
        
        <li>
            
            
            <img src="http://cube-1252774894.cosgz.myqcloud.com/links/SF.png">
            
            <a href="https://47.95.213.193" target="_blank">我的个人主页</a>
        </li>
        
        <li>
            
            
            <img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=fc01334b798b4710ce2ffacafbf5a4c0/1b4c510fd9f9d72a26f9db77df2a2834349bbb3f.jpg">
            
            <a href="https://www.zhihu.com/people/zhang-jun-wei-81-7/activities" target="_blank">我的知乎主页</a>
        </li>
        
    </ul>
</div>



<div class="cube-friend-links cube-sidebar" id="cube-friend-links">
    <div class="title">
        <a>友情链接</a>
    </div>
    <ul class="list">
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="http://cube-1252774894.cosgz.myqcloud.com/friend_links/micblo.png">
            <a href="https://github.com/MajorBill-Liu" target="_blank">MajorBill-Liu 的github</a>
        </li>
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="/images/friend_links.jpg ">
            <a href="https://kfzjw008.github.io/" target="_blank">此位置招租</a>
        </li>
        
        <li>
            <!-- TODO change avatar.png to friend.png-->
            <img src="/images/friend_links.jpg ">
            <a href="https://kfzjw008.github.io/" target="_blank">此位置招租</a>
        </li>
        
    </ul>
</div>


        </div>
    </div>
</div>
<footer class="cube-footer">
    
© 2017 kfzjw008

<br>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>.&nbsp;Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a>
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>


</footer>
<!-- inject:script -->
<script src="/js/script.js"></script>
<!-- endinject -->
<div class="cube-loading out"></div>
</body>
</html>